Updating your existing chart

How muze supports dynamic updates?

Muze has a reactive state store which listens to any change in the properties like rows and columns of the chart. Whenever rows, columns, color or any other properties changes it efficiently updates the chart and rerenders only the parts of visualization which is required. In these examples, we have created a html button element and on the button click, we will update the chart.

You can update the chart in various ways using Muze API.

Changing the data

button.addEventListener('click', () => {
  const filteredDm = muze.canvas.data().select({
   field: 'Origin',
   value: 'USA'
   operator: DataModel.ComparisonOperators.EQUAL
  });
  muze.canvas().data(filteredDm);
});

Example

<div>
  <button id='btn'>Update Chart</button>
  <button id='resetbtn'>Reset Chart</button>
  <div id="chart"></div>
</div>

const { muze, getDataFromSearchQuery, env } = viz;
let data = getDataFromSearchQuery();

const RowField = "Acceleration";
const ColumnField = "Year";
const ColorField = "Origin";
const FilterField = "Origin";
const FilterValue = "USA";

const muzeCanvas = muze
  .canvas()
  .data(data)
  .rows([RowField])
  .columns([ColumnField])
  .color(ColorField)
  .layers([{
    mark:"line",
  }])
  .mount("#chart");

muzeCanvas.once("afterRendered", () => {
  document.getElementById("btn").addEventListener("click", () => {
    muzeCanvas.data(
      data.select({
        field: FilterField,
        value: FilterValue,
        operator: muze.DataModel.ComparisonOperators.EQUAL,
      }),
    );
  });
  document.getElementById("resetbtn").addEventListener("click", () => {
    muzeCanvas.data(
      data.select(getDataFromSearchQuery()),
    );
  });
});

Adding rows or columns

button.addEventListener("click", () => {
  muze.canvas().rows(["Horsepower"]);
});

<div>
  <button id='resetbtn'>Reset Chart</button>
  <button id='btn'>Click to Update Chart</button>
  <div id="chart"></div>
</div>

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const RowFields = ["Acceleration"];
const ColumnFields = ["Year"];
const UpdatedRowFields = ["Acceleration", "Horsepower"];

const muzeCanvas = muze
  .canvas()
  .data(data)
  .rows(RowFields)
  .columns(ColumnFields)
  .layers([{
      mark:"line",
  }])
  .mount("#chart");

muzeCanvas.once("afterRendered", () => {
  document.getElementById("btn").addEventListener("click", () => {
    muzeCanvas.rows(UpdatedRowFields);
  });
  document.getElementById("resetbtn").addEventListener("click", () => {
    muzeCanvas.rows(RowFields);
  });
});

Changing the chart type

button.addEventListener("click", () => {
  muze.canvas().layers([
    {
      mark: "bar",
    },
  ]);
});

<div>
  <button id='btn'>Update chart</button>
  <button id='resetbtn'>Reset chart</button>
  <div id="chart"></div>
</div>

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const RowFields = ["Acceleration"];
const ColumnFields = ["Year"];

const muzeCanvas = muze
  .canvas()
  .data(data)
  .rows(RowFields)
  .columns(ColumnFields)
  .layers([{
      mark:"line"
  }])
  .mount("#chart");

muzeCanvas.once("afterRendered", () => {
  document.getElementById("btn").addEventListener("click", () => {
    muzeCanvas.layers([
      {
        mark: "bar",
      },
    ]);
  });
  document.getElementById("resetbtn").addEventListener("click", () => {
    muzeCanvas.layers([
      {
        mark: "line"
      },
    ]);                    
  });

Convert a single line chart to multi line chart

Muze automatically converts line chart to multi line when you add a color dimension field.

Here is how you can convert a line chart to multi line by just adding a color field.

button.addEventListener("click", () => {
  muze.canvas().color("Origin");
});

<div>
  <button id='btn'>Update chart</button>
  <button id='resetbtn'>Reset chart</button>
  <div id="chart"></div>
</div>

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const RowField = "Acceleration";
const ColumnField = "Year";
const ColorField = "Origin";

const muzeCanvas = muze
  .canvas()
  .data(data)
  .rows([RowField])
  .columns([ColumnField])
  .mount("#chart");

muzeCanvas.once("afterRendered", () => {
  document.getElementById("btn").addEventListener("click", () => {
    muzeCanvas.color(ColorField);
  });
  document.getElementById("resetbtn").addEventListener("click", () => {
    muzeCanvas.color("");
  });
});

Converting a simple chart to faceted chart

Here is how you can convert a simple chart to faceted chart using rows api.

button.addEventListener("click", () => {
  muze.canvas().rows(["Origin", "Acceleration"]);
});

<div>
  <button id='btn'>Update chart</button>
  <button id='resetbtn'>Reset chart</button>
  <div id="chart"></div>
</div>

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const RowField = "Acceleration";
const ColumnField = "Year";
const FacetField = "Origin";

const muzeCanvas = muze
  .canvas()
  .data(data)
  .rows([RowField])
  .columns([ColumnField])
  .mount("#chart");

muzeCanvas.once("afterRendered", () => {
  document.getElementById("btn").addEventListener("click", () => {
    muzeCanvas.rows([FacetField, RowField]);
  });
  document.getElementById("resetbtn").addEventListener("click", () => {
    muzeCanvas.rows([RowField]);
  });
});

Converting a scatter plot to bubble plot

Here is how you can convert a simple chart to faceted chart using size and color api.

button.addEventListener("click", () => {
  muze.canvas().size("Miles_per_Gallon").color("Origin");
});

<div>
  <button id='btn'>Update chart</button>
  <button id='resetbtn'>Reset chart</button>
  <div id="chart"></div>
</div>

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const RowField = "Acceleration";
const ColumnField = "Horsepower";
const DetailField = "Name";
const SizeField = "Miles_per_Gallon";
const ColorField = "Origin";

const muzeCanvas = muze
  .canvas()
  .data(data)
  .rows([RowField])
  .columns([ColumnField])
  .detail([DetailField])
  .mount("#chart");

muzeCanvas.once("afterRendered", () => {
  document.getElementById("btn").addEventListener("click", () => {
    muzeCanvas.size(SizeField).color(ColorField);
  });
  document.getElementById("resetbtn").addEventListener("click", () => {
    muzeCanvas.size(SizeField).color(ColorField);
  });
});